<!--
 * 切换搜索引擎
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-11-14 14:59:59
 * @LastEditTime: 2019-11-15 17:26:41
 * @FilePath: \elegant-surf\src\components\search\ChangeEngine.vue
 -->
<template>
<div id="change-engine">
  <span
    :title="googleEngine.name"
    @click="searchGoogle"
    class="engine-icon"
  >
    <img :src="icons[googleEngine.key]">
  </span>
  <span
    v-for="(engine, key) in searchEngines"
    :key="key"
    :title="engine.name"
    :class="{active: key === currentKey}"
    @click="searchEngine(key)"
    class="engine-icon"
  >
    <img :src="icons[key]">
  </span>
</div>
</template>

<script>
import { searchEngines, googleEngine } from '@/assets/js/data'
import EventBus, { CHANGE_ENGINE } from '@/assets/js/eventBus'

import googleIcon from '@/assets/img/engineicon/google.png'
import bingIcon from '@/assets/img/engineicon/bing.png'
import baiduIcon from '@/assets/img/engineicon/baidu.png'
import bingcnIcon from '@/assets/img/engineicon/bingcn.png'
import sougouIcon from '@/assets/img/engineicon/sougou.png'
import so360Icon from '@/assets/img/engineicon/so360.png'
import youdaoIcon from '@/assets/img/engineicon/youdao.png'

export default {
  name: 'change-engine',
  data() {
    return {
      searchEngines,
      googleEngine,
      // 搜索引擎图标
      icons: {
        google: googleIcon,
        bingcn: bingcnIcon,
        baidu: baiduIcon,
        bing: bingIcon,
        sougou: sougouIcon,
        so360: so360Icon,
        youdao: youdaoIcon
      },
      currentKey: this.$store.state.searchSetting.defaultEngine
    }
  },
  methods: {
    /**
     * @description: 当点击对应按钮，切换搜索引擎时触发
     * @param {string} EngineKey 要切换到的搜索引擎的key
     * @return {void}
     */
    searchEngine(EngineKey) {
      this.currentKey = EngineKey
      EventBus.$emit(CHANGE_ENGINE, EngineKey)
    },
    /**
     * 点击google搜索时触发
     */
    searchGoogle() {
      const query = this.$route.query.q
      if (!query) return
      window.open(googleEngine.url + query, '_blank')
    }
  }
}
</script>

<style lang="stylus">
#change-engine
  flex 1
  display flex
  justify-content space-around
  .engine-icon
    position relative
    &:hover::after
    &.active::after
      content ''
      position absolute
      bottom -8px
      left 12px
      width 6px
      height 6px
      border-radius 3px
      background-color #666
    img
      cursor pointer
      width 30px
      user-select none
</style>